<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;
            justify-content: center;align-items: center;}
        #box1 div{width: 30%;height: 30%;background: black;border-radius: 50%;}

        #box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;
            justify-content:space-between;}
        #box2 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
        #box2 div:last-child{align-self: flex-end;}
        
        #box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;
            justify-content:space-between;}
        #box3 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
        #box3 div:nth-child(2){align-self: center;}
        #box3 div:last-child{align-self: flex-end;}

        
        #box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
        #box4 div{width: 100%;justify-content: space-between;display: flex;}
        #box4 div:last-child{align-items: flex-end;}
        #box4 i{display: block; width: 30%;height: 60%;background: black;border-radius: 50%;}

        
        #box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
        #box5 div{width: 100%;justify-content: space-between;display: flex;}
        #box5 div:nth-child(2){justify-content: center;}
        #box5 div:last-child{align-items: flex-end;}
        #box5 i{display: block; width: 30%;height: 90%;background: black;border-radius: 50%;}
        
        #box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
        #box6 div{width: 100%;justify-content: space-between;display: flex;}
        #box6 div:last-child{align-items: flex-end;}
        #box6 i{display: block; width: 30%;height: 90%;background: black;border-radius: 50%;}
    </style>
</head>
<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>